<template>
    <h-section title="审批文档" collapse>
        <div class="section-body">
            <a-row :gutter="48">
                <a-col span="24">
                    <flexbox v-for="item of Object.keys(fileOptions)" :key="item" class="file-cont">
                        <flexbox justify="center" class="file-cont-title">
                            {{ item }}
                        </flexbox>
                        <flexbox-item>
                            <flexbox justify="space-between" class="file-cont-body">
                                <file-cell :border="false" :fileList="fileOptions[item].files" :span="24" :detail="detail" />
                            </flexbox>
                        </flexbox-item>
                    </flexbox>
                </a-col>
            </a-row>
        </div>
    </h-section>
</template>

<script lang="ts">
import FileCell from '@/components/FileCell/index.vue';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'BaseInfo',
    components: {
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        hasAuth: { type: Boolean, default: false },
        isShowHistoryDetail: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    setup(props) {
        const state = reactive<any>({
            form: {
                files: []
            },
            // 所有文件集合
            fileOptions: {}
        });
        // 初始化，并分类
        const initFile = () => {
            const fileOptions = {
                产品内部评审记录: { files: [] },
                研发评审记录: { files: [] },
                团队长审核记录: { files: [] }
            };
            state.form.files.forEach((item) => {
                if (fileOptions[item.connectType]) {
                    fileOptions[item.connectType].files = fileOptions[item.connectType].files || [];
                    fileOptions[item.connectType].files.push(item);
                }
            });
            state.fileOptions = fileOptions;
        };
        const init = () => {
            state.form.files = props.detail.files;
            initFile();
        };
        init();
        watch(() => props.detail, init, { deep: true });
        return {
            ...toRefs(state)
        };
    }
});
</script>
<style lang="less" scoped>
.file-cont {
    background: #eaf5fe;
    border: 1px solid #eee;
    & + .file-cont {
        border-top: none;
    }
    &-title {
        width: 140px;
        height: 100%;
    }
    &-edit {
        width: 50%;
        height: 100%;
        padding: 8px;
        font-size: 14px;
        .canEdit {
            cursor: pointer;
            color: @primary-color;
        }
        .disabledEdit {
            cursor: not-allowed;
            color: @disable-font-color;
        }
        .opinion-cont {
            white-space: pre-wrap;
            color: @error-color;
        }
    }
    &-body {
        position: relative;
        min-height: 56px;
        background: #fff;
        border-left: 1px solid #eee;
    }
}
</style>

